<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>

<head>

<meta name="description" content="Log">
<%@ include file="./commoms/link.txt"%>
<style>
.header {
	text-align: center;
}

.header h1 {
	font-size: 200%;
	color: #333;
	margin-top: 30px;
}

.header p {
	font-size: 14px;
}

.get {
	text-align: center;
	padding: 100px 0;
}

.phone {
	display: block;
	margin: 5px auto 0;
	margin-left: 10%;
	border-radius: 0;
	padding: 5px;
	line-height: 1.8rem;
	width: 80%;
	border: 1px solid #dedede;
	-webkit-appearance: none;
}

.va {
	display: block;
	margin: 5px auto 0;
	margin-left: 10%;
	border-radius: 0;
	padding: 5px;
	line-height: 1.8rem;
	width: 60%;
	border: 1px solid #dedede;
	-webkit-appearance: none;
}

#verification-code {
	display: block;
	margin: 5px auto 0;
	margin-right: 10%;
	border-radius: 0;
	padding: 5px;
	line-height: 1.8rem;
	width: 19%;
	border: 1px solid #dedede;
	-webkit-appearance: none;
}

#inputCode {
	display: inline-block;
	height: 40px;
	vertical-align: middle;
	border: none;
	border-radius: 10px;
	border-bottom: #DDDDDD solid 2px;
	padding-left: 10px;
}

.mycode {
	display: inline-block;
	width: 80px;
	height: 40px;
	vertical-align: middle;
}
</style>

</head>

<body>
	<header class="am-topbar am-topbar-fixed-top">
		<div class="am-container">
			<h1 class="am-topbar-brand">
				<a href="Login.jsp">儿童位置跟踪系统</a>
			</h1>
		</div>
	</header>
	<div class="get">
		<div class="am-g">
			<div class="am-u-lg-3 am-padding-vertical-lg am-u-lg-offset-7"
				style="border-style: solid; border-width: medium">
				<ul class="am-nav am-nav-pills am-nav-justify">
					<li class="am-active"><a href="./Login.jsp">用户登录</a></li>
					<li><a href="./Register.jsp">免费注册</a></li>
				</ul>
				<hr>


				<form method="post" action="#" class="am-form" id="Loginformtooltip"
					data-am-validator>
					<fieldset>
						<div class="am-form-group am-form-icon">
							<i class="am-icon-user"></i> <input type="text"
								name="PhoneNumber" id="PhoneNumber" maxlength="11"
								class="am-form-field" placeholder="请使用手机号码注册"
								pattern="1[0-9]{10}" data-foolish-msg="请输入正确的手机号码" required />

						</div>
						<div class="am-form-group am-form-icon">
							<i class="am-icon-lock"></i> <input type="password"
								name="Password" id="Password" class="am-form-field"
								placeholder="请输入登陆密码" maxlength="20"
								pattern="[a-z|A-Z|0-9]{6,20}" data-foolish-msg="请输入密码数字加字母"
								required />
						</div>
						<div class="am-g">
							<div class="am-u-lg-5 am-u-lg-centered ">
								<label for="remember-me"> <input id="remember-me"
									name="remember-me" type="checkbox"> 记住密码
								</label>
							</div>
						</div>
						<br />
						<div class="am-g">
							<input type="button" id="btnOK" name="submit" value="登 录"
								class="am-btn am-btn-primary am-btn-sm am-u-lg-5"> <input
								type="button" name="" value="忘记密码 ^_^? " id="forgetpassword"
								class="am-btn am-btn-default am-btn-sm am-u-lg-5">
						</div>

					</fieldset>
				</form>

			</div>
			<div id="codediv" class='am-hide'>
				<input id="inputCode" type="text" /> <span id="code" class="mycode"></span>
			</div> 	
		

		</div>
	</div>












	<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">找回密码</div>
			<div class="am-modal-bd">




				<form method="post" action="#" id="lookpassword" data-am-validator>
					<input type="text" name="lookphone" id="lookphone" maxlength="11"
						class="phone" placeholder="请输入找回密码的手机号码" pattern="1[0-9]{10}"
						required />

					<Button type="button" id="verification-code"
						name="verification-code"
						class="am-radius am-btn-warning am-btn-sm am-btn am-fr">
						<span>获取验证码 </span>
					</Button>

					<input type="text" name="validateCode" class="va"
						pattern="[0-9]{4}" maxlength="4" data-foolish-msg="请输入验证码"
						placeholder="填写验证码" required /> 
						<input type="password" name="lookpassword" 
						class="am-modal-prompt-input" placeholder="请设置登陆密码" maxlength="20"
						pattern="[a-z|A-Z|0-9]{6,20}" id="lookforpassword" required />
						 <input type="password"
						name="PasswordRepeat" class="am-modal-prompt-input"
						 placeholder="请重复密码" id="lookrePassword" required
						 />

				</form>
			</div>
			<div class="am-modal-footer">
				<span class="am-modal-btn" data-am-modal-cancel>取消</span> <span
					class="am-modal-btn" id="lookforpasswordbtn" data-am-modal-confirm>提交</span>
			</div>

		</div>
	</div>



	

	<script type="text/javascript">
	<%session.invalidate(); %>
		var inp = document.getElementById('inputCode');
		var code = document.getElementById('code');
		
		var phoneNum = getCookie('phoneNum');
		var password = getCookie('password');
		var $form = $('#Loginformtooltip');
		var times = 0;
		var i = 60;
		var isvalidate=true;
		var codemodal=myHint('验证码', $('#codediv'));
		var c = new KinerCode({
			len : 4,//需要产生的验证码长度
			chars : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e',
					'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q',
					'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C',
					'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
					'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ],
			question : false,
			copy : true,
			randomBg : true,
			inputArea : inp,
			codeArea : code,
			click2refresh : true,
			false2refresh : true,
			validateEven : "blur",
			validateFn : function(result, code) {
				if (result) {
					isvalidate=true;
					codemodal.modal('close');
					$('#codediv').attr('class','am-hide');
				} else {

					if (this.opt.question) {
					} else {
					}
				}
			}
		});
	

		function showTime() {
			i = i - 1;
			$('#verification-code').text(i + 's重新发送');
		}
		if (phoneNum != null && password != null) {
			$('#remember-me').attr('checked', 'checked');
			$('#PhoneNumber').val(phoneNum)
			$('#Password').val(password);
		}
		setFormValidate($form);

		function submit() {
			if(isvalidate==false)
				{
				myAlert('提示', '请输入验证码');
				codemodal.modal('open');
				c.refresh();
				return false;
				}
			var PhoneNumber = $("#PhoneNumber").val();
			var Password = $("#Password").val();
			var regPhoneNumber = /1[0-9]{10}/;
			var regPassword = /[a-z|A-Z|0-9]{6,20}/;
			if (!regPhoneNumber.test(PhoneNumber)
					|| !regPassword.test(Password)) {
				$form.submit();
				return false;
			} else {
				myAjax(domain + "/api/user/authorize.do", {
					"phonenumber" : PhoneNumber,
					"password" : Password,
					 "web":1
				}, function(data) {
					if (data.code == '200') {
						window.location.href = "userIndex.jsp";
					
					} else {
						times++;
						if (data.code== '403') {

							myAlert('警告', '密码错误!!!');
							$("#Password").focus();

						} else if (data.code== '406') {
							myAlert('警告', '没有这个用户!!!');

							$("#PhoneNumber").focus();
						}
						if (times >= 3) {
                        
							$('#codediv').attr('class','');
							isvalidate=false;
					
							codemodal.modal('open');
							c.refresh();
						}
					}
				});

			}

		}
		$('#remember-me')
				.click(
						function() {

							if ($('#remember-me').is(':checked')) {
								var days = 7;
								var exp = new Date();
								exp.setTime(exp.getTime() + days * 60 * 1000
										* 60 * 24);
								document.cookie = "phoneNum="
										+ $('#PhoneNumber').val() + ";expires="
										+ exp.toGMTString();
								document.cookie = "password="
										+ $('#Password').val() + ";expires="
										+ exp.toGMTString();

							} else {

								var exp = new Date();
								document.cookie = "password="
										+ $('#Password').val() + ";expires="
										+ exp.toGMTString();
								$("#Password").val('');
             
							}

						});
		$('#btnOK').click(function() {

		
				submit();
		});
		$('#forgetpassword').click(
				function() {
					$('#my-prompt').modal({
					onConfirm : function(e) {

						},
						onCancel : function(e) {

						}
					});
					$('#my-prompt').find('#lookforpasswordbtn').off(
							'click.close.modal.amui');
				});
		$('#lookforpasswordbtn').click(function(e) {
			
		
			lookpassword();
		});
		function lookpassword() {
			if(isvalidate==false){
				$('#codediv').attr('class','');
				codemodal.modal('open');
				c.refresh();
				return false;
				}
			var validatecode = $('[name=validateCode]').val();
			var PhoneNumber = $("#lookphone").val();
			var Password = $("#lookforpassword").val();
			var rePassword = $("#lookrePassword").val();
       
			var regvalidateCode = /[0-9]{4}/;
			var regPhoneNumber = /1[0-9]{10}/;
			var regPassword = /[a-z|A-Z|0-9]{6,20}/;
			if (!regvalidateCode.test(validatecode)
					|| !regPhoneNumber.test(PhoneNumber)
					|| !regPassword.test(Password)
					|| !regPassword.test(rePassword) || rePassword != Password) {
				$('#lookpassword').submit();
				myAlert('提示', '请正确输入');
				return false;
			} else {
				myAjax(domain + "/api/user/passwordForgot.do", {
					"validatecode" : validatecode,
					"phonenumber" : PhoneNumber,
					"password" : Password,
					web:1
				}, function(data) {
					if (data.code == '200') {
						$('#my-prompt').modal("close");
						myAlert('提示', '修改成功');
						isvalidate=true;
					} else {
						
						times++;
						isvalidate=false;
						if(data.code == '406')
							{
							myAlert('提示', '验证码错误');
							$('[name=validateCode]').focus();
							}
						if(data.code == '403')
						{
							myAlert('提示', '用户不存在');
							 $("#lookphone").focus();
						}
				
					
					}
				});
			}
		}
		$('#verification-code').click(
				function() {
					if(isvalidate==false){
					$('#codediv').attr('class','');
					codemodal.modal('open');
					c.refresh();
					return false;
					}
					var $btn = $(this)
					var text = $("#lookphone").val();
					var reg = /1[0-9]{10}/;
					var registermessage = getCookie('registermessage');
					if (registermessage == null || registermessage != text) {
                   
						if (reg.test(text)) {
							
							myAjax(domain + "/api/user/getValidateCode.do", {
								"phonenumber" : text,
								isforgot:1
							}, function(data) {
								if (data.code == '406') {
                      
									myAlert('提示', '手机号码不正确');
								
									times++;
									$("#PhoneNumber").focus();
									isvalidate=false;

								} else if (data.code == '200'){
									var mins = 5;
									var exp = new Date();
									var int = setInterval(showTime, 1000);
									exp.setTime(exp.getTime() + mins * 1000
											* 60);
									document.cookie = "registermessage=" + text
											+ ";expires=" + exp.toGMTString();
									$btn.button('loading');
									setTimeout(function() {
										clearInterval(int);
										i = 60;
										$btn.button('reset');
									}, 60000);
								}

							});

						} else {
							myAlert('提示', '手机号码格式不正确!!!');
							$("#lookphone").focus();
							
						}
					} else
						myAlert('提示', '请稍后再试!!!');
				}

		);
	</script>



</body>

</html>
